<!--
* @Author: your name
* @Date: 2020-07-29 10:47:51
 * @LastEditTime: 2020-07-29 11:57:58
 * @LastEditors: Please set LastEditors
* @Description: In User Settings Edit
* @FilePath: \vue_plugins\src\views\Lottie.vue
--> 
<template>
  <div class="container">
    <van-nav-bar title="lottie动画" :border="false" fixed left-arrow @click-left="$router.go('-1')" />
    <lottie
      :options="defaultOptions"
      :animationSpeed="animationSpeed"
      @animCreated="handleAnimation"
    />
  </div>
</template>

<script>
import * as weather from "../assets/animate/weather.json";
export default {
    data() {
        return {
            defaultOptions: {
                animationData: weather.default,
                renderer: "svg",
            },
            animationSpeed: 0.1,
            anim: {},
        };
    },
    mounted() {},
    methods: {
        handleAnimation: function (anim) {
            this.anim = anim;
            this.anim.setSpeed(this.animationSpeed);
            console.log(anim); //这里可以看到 lottie 对象的全部属性
        },
    },
};
</script>

<style lang="less" scoped>
.content_lottie {
    width: 100%;
    height: 100%;
}
</style>